<template>
	<view class="page">
		<view style="position: absolute;z-index: 999;width: 100%;">
			<view :style="{height:statusHeight+'px'}"></view>
			<view class="head" style="display: flex;justify-content: center;align-items: center;height: 44px;padding: 5px;">
				<view style="width: 44px;margin-left: 16rpx;position: absolute;left: 16rpx;" @click="toBack()">
					<u-icon name="arrow-left" size="22" color="#000"></u-icon>
				</view>
				<view style="font-size: 36rpx;color: #000;">测评</view>
			</view>
		</view>
		<view :style="{height:headHeight+'px'}"></view>
		<view class="h30"></view>
		<view class="b-box">
			<view class="h30"></view>
			<view style="text-align: center;color: #333333;font-size: 48rpx;line-height: 41.7rpx;font-weight: 600;">您的测评结果</view>
			<view class="h30"></view>
			<view class="block">
				<div class="content">
				    <div class="title">测评结果</div>
				    <div class="end-tag" :style="{color:endColor}">{{dem_src.tag}}</div>
				    <div class="end">
				        <div class="end-text">你的焦虑得分：</div>
				        <div class="end-color" :style="{backgroundColor:endColor}"></div>
				    </div>
				    <div class="tag-list">
				        <div class="tag" v-for="(item,index) in evaluate" :key="index">
				            <div class="tag-color" :style="{backgroundColor:item.color}"></div>
				            <div :class="dem_src.tag==item.tag? 'tag-name-ac':'tag-name'">{{item.tag}}</div>
				        </div>
				    </div>
				</div>
			</view>
			<view class="h30"></view>
<!-- 			<view class="block">
			</view> -->
			<view class="block">
						<div class="content">
						    <div class="all-title">总体评分：</div>
						    <div class="evaluate">{{dem_src.evaluate}}</div>
						    <div class="suggest-title">结果解释：</div>
						    <div class="suggest-text">{{dem_src.explain}}</div>
						</div>
			<!-- 			<div class="index-item">
						    <div class="index-header">
						        <div class="index-title">为你推荐</div>
						    </div>
						    <div class="recommend-content">
						        <div class="recommend-title">研究表明正念与冥想能有效促进情绪改善，结合你的情绪状态已为您个性化推荐以下内容：</div>
						        <div class="recommended-list">
						            <div class="recommended-item" @click="goTrain('正念冥想')">
						                <div class="thumbnail">
						                    <div class="item-icn">训练</div>
						                    <img src="../assets/images/train1.jpg" alt=""/>
						                </div>
						                <div class="item-name">正念冥想</div>
						            </div>
						            <div class="recommended-item" @click="goTrain('美人技术')">
						                <div class="thumbnail">
						                    <div class="item-icn">训练</div>
						                    <img src="../assets/images/recommended-pic.webp" alt=""/>
						                </div>
						                <div class="item-name">美人技术</div>
						            </div>
						        </div>
						    </div>               
						</div> -->
					</view>
		</view>
	</view>
</template>

<script>
	import {mapState, mapGetters} from 'vuex'
	export default {
		computed: {
			...mapState(['member']),
		},
		data() {
			return {
				statusHeight:20,
				headHeight:64,
				dem_src:'',
				endColor:'',
				evaluate:[]
			};
		},
		onLoad(opt) {
			this.statusHeight = uni.getSystemInfoSync().statusBarHeight;
			this.headHeight = this.statusHeight+44;
			uni.$u.http.post('/client/test_report',{id:opt.id,phone:this.member.phone}).then(res=>{
			    let dem_src=JSON.parse(res.data.testData[0].dem_src)
			    let evaluate=JSON.parse(res.data.testData[0].evaluate)
			    this.dem_src=dem_src[0];
				console.log(this.dem_src);
			    this.evaluate=evaluate;
			    evaluate.forEach(t=>{
			        if(dem_src[0].src>=t.score[0]&&dem_src[0].src<=t.score[1]){
			            this.endColor=t.color
			        }
			    })
			})
		},
		methods:{
			toBack(){
				uni.navigateBack()
			}
		},
	}
</script>

<style lang="scss" scoped>
	.b-box{
		width: 750rpx;
		min-height: 100vh;
		background: #f7f7f7;
		border-radius: 72rpx 70rpx 0rpx 0rpx;
		box-shadow: 4rpx 8rpx 16rpx #a4aede2e;
		backdrop-filter: blur(10px);
		mix-blend-mode: normal;
	}
	
	.container{
	    padding: 16px;
	}
	.content{
	    background-color: #fff;
	    padding: 12px;
	    border-radius: 10px;
	}
	.title{
	    height: 26px;
	    line-height: 26px;
	    text-align: center;
	    font-size: 14px;
	    font-weight: 500;
	    color: #333;
	    margin-bottom: 10px;
	}
	.end-tag{
	    height: 24px;
	    line-height: 24px;
	    text-align: center;
	    font-size: 24px;
	    font-weight: 500;
	    color: #55CF04;
	    margin-bottom: 20px;
	}
	.end{
	    height: 20px;
	    display: flex;
	    justify-content: space-between;
	    margin-bottom: 10px;
	}
	.end-text{
	    height: 20px;
	    line-height: 20px;
	    font-size: 18px;
	    font-weight: 500;
	    color: #333;
	}
	.end-color{
	    height: 20px;
	    width: 60px;
	    border-radius: 4px;
	}
	.tag-list{
	    height: 40px;
	    display: flex;
	    justify-content: space-between;
	}
	.tag{
	    width: 30%;
	}
	.tag-color{
	    height: 20px;    
	    border-radius: 4px;
	    margin-bottom: 6px;
	}
	.tag-name{
	    height: 14px;
	    line-height: 14px;
	    font-size: 12px;
	    font-weight: 500;
	    color: #999999;
	    text-align: center;
	}
	.tag-name-ac{
	    height: 14px;
	    line-height: 14px;
	    font-size: 12px;
	    font-weight: 500;
	    color: #333333;
	    text-align: center;
	}
	.all-title{
	    margin-top: 30px;
	    height: 18px;
	    line-height: 18px;
	    font-size: 18px;
	    font-weight: 500;
	    color: #333;
	    margin-bottom: 10px;
	}
	.evaluate{
	    font-size: 14px;
	    color: #333;
	}
	.suggest-title{
	    margin-top: 30px;
	    height: 18px;
	    line-height: 18px;
	    font-size: 18px;
	    font-weight: 500;
	    color: #333;
	    margin-bottom: 10px;
	}
	.suggest-text{
	    line-height: 20px;
	    font-size: 14px;
	    color: #333;
	}
	.index-item{
	    border-radius: 10px;
	    margin-top: 10px;
	}
	.index-header{
	    background-color: #FBFCFC;
	    border-radius: 10px 10px 0px 0px;
	    height: 48px;
	    display: flex;
	    justify-content: space-between;
	    padding: 0px 12px;
	}
	.index-title{
	    height: 48px;
	    line-height: 48px;
	    font-size: 16px;
	    font-weight: 500;
	    color: #333;
	}
	.recommend-title{
	    line-height: 20px;
	    font-size: 14px;
	    color: #333;
	    padding: 12px 0px;
	}
	.check-details{
	    display: flex;
	    justify-content: flex-start;
	    height: 16px;
	    margin-top: 16px;
	}
	.details-text{
	    height: 16px;
	    line-height: 16px;
	    font-size: 14px;
	    color: #333;
	    margin-right: 2px;
	}
	.check-details img{
	    display: block;
	    height: 16px;
	}
	.recommend-content{
	    padding: 0px 12px;
	    background-color: #fff;
	    border-radius: 0px 0px 10px 10px;
	}
	.recommend-title{
	    line-height: 20px;
	    font-size: 14px;
	    color: #333;
	    padding: 12px 0px;
	}
	.recommended-list{
	    display: flex;
	    justify-content: space-between;
	    padding-bottom: 12px;
	}
	.recommended-item{
	    width: 48%;
	}
	.thumbnail{
	    height: 80px;
	    width: 100%;
	    border-radius: 10px;
	    position: relative;
	}
	.thumbnail img{
	    display: block;
	    height: 80px;
	    width: 100%;
	    border-radius: 10px;
	}
	.item-icn{
	    height: 14px;
	    line-height: 14px;
	    width: 34px;
	    text-align: center;
	    font-size: 10px;
	    color: #fff;
	    border-radius: 0px 10px 0px 10px;
	    background-color: #55CF04;
	    position: absolute;
	    top: 0px;
	    right: 0px;
	}
	.item-name{
	    line-height: 20px;
	    text-align: center;
	    font-size: 12px;
	    color: #333333;
	    margin-top: 8px;
	}
	.low{
	    height: 94px;
	    line-height: 94px;
	    font-size: 16px;
	    font-weight: 600;
	    color: #666;
	    text-align: center;
	}
</style>
